//
// 调整审批人
//
<template>
  <div v-loading="loading" class="main_adjustment">
    <div class="main_adjustment_text">因
      <span class="main_adjustment_menuName">{{ userList.menuName }}</span>
      用户不存在（已停用），该用户名下的审批任务待交接。
      <div class="main_box_user">
        <span class="main_user">交接人</span>
        <span class="main_user_input">
          <el-autocomplete
            v-model="formData.realName"
            class="inline-input"
            :fetch-suggestions="querySearch"
            placeholder="请输入"
            :trigger-on-focus="true"
            @select="getUserId"
          />
          <a
            class="clickChoose_button"
            @click.prevent="chooseUser()"
          >
            <svg-icon icon-class="选择弹框" />
          </a>
        </span>
      </div>
    </div>
    <div class="main_bottom">
      <el-button @click.stop="onSubmit()">确定</el-button>
    </div>
  </div>
</template>

<script>
import ChooseUser from './seachUser'
import { editApproval } from '@/api/backlogTask/backlogTask'
import { selectUserByDeptId } from '@/api/system/dept'

export default {
  name: '',
  props: {
    layerid: {},
    id: {},
    defaultValue: {},
    userList: {}
  },
  data() {
    return {
      loading: false,
      pageData: {
        pageNum: 1,
        pageSize: 20,
        orderByColumn: 'updateTime',
        isAsc: 'desc'
      },
      formData: {
        userId: '',
        realName: ''
      },
      userData: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    querySearch(queryString, cb) {
      const restaurants = this.userData
      const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      results.forEach(item => {
        item.value = item.realName
        item.label = item.realName
      })
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    // 输入框带搜索建议筛选
    createFilter(queryString, isMaterialName) {
      return (restaurant) => {
        if (isMaterialName) {
          if (restaurant.label !== null) {
            return (restaurant.label.toLowerCase().indexOf(queryString.toLowerCase()) > -1)
          }
        } else {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1)
        }
      }
    },
    getList() {
      selectUserByDeptId(this.pageData).then(res => {
        this.userData = res.data
      })
    },
    getUserId(item) {
      this.formData.userId = item.userId
    },
    chooseUser() { // 选择人员弹窗
      this.$layer.iframe({// 弹框
        content: {
          content: ChooseUser, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
            userId: this.formData.userId,
            selectionList: this.formData
          }// props
        },
        area: ['1000px', '700px'],
        title: '选择人员', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    },
    chooseUserInfo(data) { // 选择人员回调
      this.formData.userId = data.userId
      this.formData.realName = data.realName
    },
    onSubmit() { // 确认
      if (!this.formData.userId) {
        this.$message.warning('审批人员不能为空')
        return
      } else {
        this.loading = true
      }
      editApproval({ newUserId: this.formData.userId, oldUserId: this.userList.contentId }).then(res => {
        if (res.code == 200) {
          this.loading = false
          this.$message.success('操作成功')
          this.$layer.close(this.layerid)// 关闭弹框
          this.$parent.getList()
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.main_adjustment{
  width: 100%;
  display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/deep/ .el-input__inner{
    border-right: none !important;
    border-top-right-radius: unset !important;
    border-bottom-right-radius: unset !important;
}
.main_box_user {
  display: flex;
}
.main_user_input {
  display: flex;
}
.clickChoose_button {
  width: 30px;
  background-color: #387bfc;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  height: 27px !important;
  border-radius: 0 4px 4px 0;
}
.clickChoose_button:hover {
  background-color: rgba(56,123,252,.5);
}
// .main_bottom {
//   margin-top: 15px !important;
//   margin-right: 15px !important;

// }
  .main_bottom {
    // padding: 10px 20px;
    width: 100%;
    height: 55px;
    margin-right: 0 !important;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .el-button {
      margin-right: 20px;
    }

    box-shadow: 0px 0px 6px 0px rgba(29, 65, 134, 0.18);
    border-top: 1px solid rgba(29, 65, 134, 0.18);
  }
.main_box_user {
  margin-top: 10px;
}
.main_user {
  font-size: 14px !important;
  margin-right: 15px;
}
/deep/ .el-input--medium {
  height: 30px !important;
  .el-input__inner {
    height: 27px !important;
  }
}
.main_bottom {
 text-align: right;
  margin-top: 28px;
  margin-right: 10px;
}
  .main_adjustment_text {
    margin-top: 20px;
    font-size: 14px;
    line-height: 25px;
    // margin-left: 17px;
    // margin-right: 17px;
    .el-input {
      width: 200px;
      padding: 0 10px;
    }
  }
  .main_adjustment_menuName {
    min-width: 63px;
    display: inline-block;
    text-align: center;
  }
</style>
